技術問答
技術文章
iT 徵才
Tag
聊天室
2024 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
7
0
佛心分享-IT 人自學之術
【現在學React還來得及嗎?】30天Takeaway分享
系列 第
7
篇
【Day7】State1
16th鐵人賽
react
haruowang
2024-08-11 11:33:08
257 瀏覽
分享至
Takeaway
State:隨時間而變化,不能藉由現有資料計算出來
決定State放在哪:找到用State的組件們,再找它們的共同父組件
更改區域變數不會觸發渲染
State變數:用來保留資料。如index
State setter函數:更新State變數並觸發渲染。如setIndex
觸發組件渲染的兩種原因:初次渲染、狀態改變
初次渲染其實是:調用createRoot→render組件→在DOM上appendChild。簡寫為觸發 → 渲染 → 提交
appendChild只能接收一個參數;append可以接收多個,還能接收字串
prepend:把節點插到前面的append
常見const [index, setIndex] = useState(0)搭配setIndex(index + 1)
Vue的ref類似useState,而非useRef。後者可以保存不用重渲染的資料。
Vue的onClick會簡寫成@click,全名是v-on:click
Hook只能在組件或自訂Hook的最頂端調用
Hook擺錯位置會被eslint-plugin-react-hooks抓包,顯示錯誤「渲染的Hook比預期還要少」
State具獨立及私有性。渲染同組件時兩次時,可以有不同狀態
兩個State想同步?從子組件移到父組件中
如果組件要重渲染才會需要State,不然事件處理函數有時就夠了
useState也要記得import
Closure:閉包。內部函式可以從外部函式取得變數,也就是事件處理函數及JSX,可以取得外部函式變數和State的原因。
閉包適合緩存,但缺點是外部宣告的變數如果沒用到,會造成記憶體洩漏
留言
追蹤
檢舉
上一篇
【Day6】Events
下一篇
【Day8】State2
系列文
【現在學React還來得及嗎?】30天Takeaway分享
共
30
篇
目錄
RSS系列文
訂閱系列文
3
人訂閱
26
【Day26】R3F 2
27
【Day27】R3F 3
28
【Day28】React Leaflet 1
29
【Day29】React Leaflet 2
30
【Day30】React Leaflet 3
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1055
組
團體組數
40
組
累計文章數
20086
篇
最後報名日
9/15
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
16th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
vue.js
熱門問題
關於 source code 版權問題
Excel 流水編碼
如何用CSS表格連接條碼印標機
請問輸出顯示比例 , 怎麼無法全螢幕
Linux 環境,定期上傳及下載檔案方式
兩台防火牆 如何利用第三台防火牆 轉發流量 互相可以使用對方的應用程式?
word檔左下角出現小箱子的圖示是什麼問題
指定臉書頁面掃描 QR Code 導向問題
為甚麼css和html連不起來? 但複製到Codepen裡就可以正常呈現
OPNsense 如何監控所有內網流量?
熱門回答
Linux 環境,定期上傳及下載檔案方式
兩台防火牆 如何利用第三台防火牆 轉發流量 互相可以使用對方的應用程式?
JS OVERLOAD 問題請教
Excel 流水編碼
關於 source code 版權問題
熱門文章
寫在最後:完賽撒花!
[為你自己寫 Vue Component] 總結 & 感謝
慘痛的資遣-萬惡的軟體接案公司
《零基礎快速入門:GenAI 搭配 Google Apps Script 的工作自動化寶典》Chapter 5-3 輕鬆打造客製化預約系統
使用 Spring AI 打造企業 RAG 知識庫【35】- React 前端如何處理流式輸出
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}